<template>
	<view class="map_box">
		<!-- <cover-image class="back_up" src="../../../static/city-manage/back.png"></cover-image> -->
		<!-- #ifdef H5-->
		<view id="PublicMap"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<map class="H5_map" :latitude="latitude" :longitude="longitude" :markers="covers" :polygons="polygon" scale="16" @tap="changeMarker"></map>
		<!-- #endif -->
		<view class="map_legend">
			<view class="legend_item">
				<view class="QJ_border"></view>
				<view class="legend_text">曲江边界</view>
			</view>
			<view class="legend_item">
				<image class="address" src="../../../static/city-manage/uni-address.png"></image>
				<view class="legend_text">我的位置</view>
			</view>
		</view>
		<view class="uni-report">
			<view @click="saveCurrentAddress">点击提交位置信息</view>
		</view>
	</view>
</template>

<script>
	import {getQjBjMapData} from '@/api/configure.js'
	export default {
		data() {
			return {
				GDMap: null,
				marker: null,
				//H5
				longitude: '108.99569',
				latitude: '34.20124',
				covers: [],
				//案件的坐标
				gdx: '',
				gdy: '',
				//曲江面数据
				QJPolygonData: null,
				polygon: {
					points: [],
					strokeColor: 'pink',
					strokeWidth: 3,
					fillColor: 'rgba(0, 122, 255, 0.3)'
				},
				addressName: '',
				currentXy: {
					gdx: '',
					gdy: '',
				}
			}
		},
		onLoad() {
			// #ifdef H5
			this.$nextTick(() => {
				this.initMap();
			})
			// #endif

			// #ifdef APP-PLUS
			//定位
			this.geoLocation();
			// #endif
			// APP-PLUS 获取曲江边界
			this.getQjBjMapData();
		},
		methods: {
			//点击地图
			changeMarker(e){
				this.covers.forEach((ele) => {
					if(ele.id == 1){
						ele.latitude = e.detail.latitude;
						ele.longitude = e.detail.longitude;
					}
				});
				this.covers = [...this.covers];//更新数据，把自己赋值给自己
				this.$forceUpdate();//强制重新渲染页面
			},
			//关闭当前页面，当前位置已经存储到storage中
			saveCurrentAddress() {
				if(uni.getStorageSync('currentLocation') == ''){
					return;
				}
				uni.navigateBack({
					delta: 1
				});
			},
			//初始化地图
			initMap() {
				this.GDMap = new AMap.Map('PublicMap', {
					zoom: 14,
					viewMode: '2D',
					center: [108.99569, 34.20124],
					resizeEnable: true,
				});
				//定位
				let _this = this;
				this.GDMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, // 是否使用高精度定位，默认：true
						convert: true,
						showMarker: true,
						panToLocation: true,
					});
					_this.GDMap.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', onComplete)
					AMap.event.addListener(geolocation, 'error', onError)

					function onComplete(data) {
						// data是具体的定位信息
						_this.GDMap.setCenter(data.position); // 执行定位
						//把当前处置人员的位置存到storage
						uni.setStorageSync('currentLocation', {
							currentx: data.position.lng,
							currenty: data.position.lat,
							currentAddress: data.formattedAddress
						})
					}

					function onError(data) {
						// 定位出错
					}
				})
				//获取曲江边界
				this.getQjBjMapData();
			},
			//获取曲江边界
			async getQjBjMapData() {
				const response = await getQjBjMapData();

				if(response.code == 200){
					this.QJPolygonData = JSON.parse(response.msg).coordinates;

					this.polygon = [];
					this.polygon = [{
						points: [],
						strokeColor: 'pink',
						strokeWidth: 3,
						fillColor: 'rgba(0, 122, 255, 0.3)'
					}];
					this.QJPolygonData[0].forEach((ele) => {
						this.polygon[0].points.push({latitude:ele[1], longitude: ele[0]})
					})

					//画出曲江边界
					// #ifdef H5
					this.initQJPolygon();
					// #endif
				}else{
					this.$tip.toast(response.msg)
				}
			},
			//定位
			geoLocation() {
				let _this = this;
				uni.showLoading({
					title: '正在获取定位'
				});
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						_this.currentXy.gdx = res.longitude;
						_this.currentXy.gdy = res.latitude;
						// #ifdef APP-PLUS
						_this.addressName = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;
						// #endif
						_this.covers = [];
						_this.covers = [{
							id: 1,
							latitude: _this.currentXy.gdy,
							longitude: _this.currentXy.gdx,
							iconPath: '../../../static/city-manage/uni-address.png'
						},{
							latitude: _this.gdy,
							longitude: _this.gdx,
							iconPath: '../../../static/city-manage/case.png'
						}];
						//把当前处置人员的位置存到storage
						uni.setStorageSync('currentLocation', {
							currentx: _this.currentXy.gdx,
							currenty: _this.currentXy.gdy,
							currentAddress: _this.addressName
						});
						uni.hideLoading()
					}
				});
			},
			//画出曲江边界
			initQJPolygon() {
				let Polygon = new AMap.Polygon({
					map: this.GDMap,
					path: this.QJPolygonData,
					strokeColor: 'pink',
					strokeOpacity: 0.8,
					strokeWeight: 3,
					strokeStyle: "dashed",
					fillColor: '#007aff',
					fillOpacity: 0.4,
					zIndex: 999
				});
				this.GDMap.setFitView(Polygon); // 执行定位
			}
		}
	}
</script>

<style lang="scss">
	.map_box {
		position: relative;
		margin: 0 auto;
		width: 750rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		//align-items: center;
		z-index: 1;
		background: #fff;

		.back_up {
			width: 80rpx;
			height: 80rpx;
			background: rgba(0, 0, 0, 0.8);
			padding: 10rpx;
			position: absolute;
			top: 60rpx;
			left: 0;
			z-index: 999;
		}

		.map_legend {
			box-shadow: #b5cede 0px 0px 10px;
			background: white;
			padding: 10rpx;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;

			.legend_item {
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 24rpx;
				line-height: 50rpx;

				.address {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.QJ_border {
					width: 50rpx;
					height: 34rpx;
					background: #007aff;
					border: 2px solid pink
				}
			}
		}

		.uni-report {
			width: 340rpx;
			height: 80rpx;
			background: linear-gradient(to right, #ee625f, #ae0909);
			border-radius: 80rpx;
			position: absolute;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			bottom: 40rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 999;
		}
	}

	// #ifdef H5
	#PublicMap {
		width: 750rpx;
		height: 100%;
		height: calc(100% - 240rpx);
	}

	.H5_map {
		width: 750rpx;
		height: 100%;
		height: calc(100% - 240rpx);
	}

	// #endif
	// #ifdef APP-PLUS
	.H5_map {
		width: 750rpx;
		height: 100%;
		height: calc(100% - 240rpx);
	}

	// #endif
</style>
